<template>
  <div class="search-components">
    <div class="search-component">
      <div class="row keyword">
        <p class="label">班组名称</p>
        <el-select
          v-model="searchModel.teamId"
          filterable
          style="width: 220px"
          placeholder="班组名称"
        >
          <el-option
            v-for="item in teamId.data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="row keyword">
        <p class="label">收费员名称</p>
        <el-select
          v-model="searchModel.cashier"
          filterable
          style="width: 220px"
          placeholder="收费员名称"
        >
          <el-option
            v-for="item in cashier.data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <p class="label">月份</p>
        <el-date-picker
          v-model="searchModel.dutyDate"
          type="month"
          placeholder="日期"
          style="width: 220px"
          @change="handleSearch"
        ></el-date-picker>
      </div>
      <div class="search-btn">
        <el-button class="reset-btn" type="primary" @click="handleReset">
          <img class="icon-img" :src="iconReset" alt="" />
          重置</el-button
        >
        <el-button class="submit-btn" type="primary" @click="handleSearch">
          <img class="icon-img" :src="iconSearch" alt="" />
          查询</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import iconSearch from "@/assets/image/btn/icon-search.png";
import iconReset from "@/assets/image/btn/icon-reset.png";
import { getTeamGroup, getTollmanList } from "@/service/modules/publicModule";
import { getFormatDate } from "@/utils/date.js";
const emits = defineEmits(["search"]);

const searchModel = ref({
  cashier: "",
  teamId: "",
  dutyDate: "",
  year: "",
  month: "",
});

const teamId = reactive({
  data: [
    {
      id: "",
      name: "全部",
    },
  ],
});

const cashier = reactive({
  data: [],
});

const getData = async () => {
  await getTeamGroup().then((res) => {
    if (Array.isArray(res.data.result)) {
      if (res.data.result[0].name !== "全部") {
        res.data.result.unshift(teamId.data[0]);
      }
      teamId.data = res.data.result;
    }
    if (teamId.data.length > 0) {
      // searchModel.value.teamId = teamId.data[0].id;
      // searchModel.value.teamName = teamId.data[0].name;
      searchModel.value.dutyDate = getFormatDate(new Date(), "YYYY-MM");
    }
  });
  await getTollmanList().then((res) => {
    cashier.data = res.data.result;
  });
};

getData();

const handleReset = () => {
  searchModel.value = {};
  // searchModel.value.teamId = teamId.data[0].id;
  searchModel.value.dutyDate = getFormatDate(new Date(), "YYYY-MM");
  emits("search", searchModel.value);
};

const handleSearch = () => {
  // console.log("searchModel ===>", searchModel.value);

  let date = new Date(searchModel.value.dutyDate);
  let year = date.getFullYear();
  let month = date.getMonth() + 1;

  month = (month < 10 ? "0" : "") + month;
  //   searchModel.value = `${year}-${month}`;
  searchModel.value.year = `${year}`;
  searchModel.value.month = `${month}`;
  // return;
  emits("search", searchModel.value);
};
</script>

<style lang="less" scoped>
.search-components {
  .search-component {
    display: flex;
    flex-wrap: wrap;

    .row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .label {
      font-size: 14px;
      color: #333333;
      margin-right: 8px;
      font-weight: 400;
    }

    .keyword {
      margin-right: 32px;
    }
  }

  .search-btn {
    margin-left: 50px;
    display: flex;

    .reset-btn {
      background: #f2f3f5;
      border: 1px solid #f2f3f5;
      border-radius: 2px;
      color: #333333;
      padding: 5px 16px;
    }

    .submit-btn {
      background: #007aff;
      border: 1px solid #007aff;
      border-radius: 2px;
      padding: 5px 16px;
    }

    .icon-img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
}
</style>